<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta name="description" content="Linframe是国内推出的一个用于前端开发的开源工具包。它由lindf开发，是一个CSS/HTML框架。目前，Linframe最新版本为1.0 。Linframe中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
    <meta name="keywords" content="Linframe,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
    <meta name="author" content="lindingfeng">
    <meta name="robots" content="index,follow">
    <meta name="application-name" content="lindf.com">
    <title>组件样式</title>
    <link rel="icon" href="img/icon4.ico"/>
    <link rel="stylesheet" href="css/lindf.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="">
<!-- 顶部导航 -->
<div style="background-color: #222;">
    <div class="container" style="position: relative; z-index: 10;">
        <div class="navbar navbar-inverse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0);">Linframe</a>
            </div>
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="http://www.lindf.com/index.html">起步</a></li>
                    <li><a href="http://www.lindf.com/GlobalCss.html">全局 CSS 样式</a></li>
                    <li class="active"><a href="http://www.lindf.com/Assembly.html">组件样式</a></li>
                    <li><a href="http://www.lindf.com/JsConnector.html">JavaScript样式</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-nav-right ">
                    <li><a class="" href="https://git.oschina.net/lindingfeng/lindfqianduankuangjia.git" target="_blank">GitHub</a></li>
                    <li><a class="" href="http://www.lindf.com/Resume.html">个人简历</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 头部面板 -->
<div class="bs-docs-header">
    <div class="jumbotron">
        <div class="container" style="padding: 0 15px;">
            <h1>组件样式</h1>
            <p>无数可复用的组件，包括字体图标、导航、进度条、警告框、弹出框、面板等更多功能。</p>
            <p style="margin-bottom: 0;"><a class="btn btn-primary btn-lg" href="#" role="button">Learn More</a></p>
        </div>
    </div>
</div>

<!-- 主体部分 -->
<div class="container">
    <!-- 右侧固定列表 -->
    <div class="col-md-3" style="padding-left: 0;">
        <div class="hidden-xs hidden-sm" data-panel="Collapse" style="">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">字体图标(Glyphicons)</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">可用的字体图标</li>
                    <li class="list-group-item">如何使用</li>
                    <li class="list-group-item">字体图标实例</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">按钮组</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">简述</li>
                    <li class="list-group-item">基本实例</li>
                    <li class="list-group-item">按钮组工具栏</li>
                    <li class="list-group-item">尺寸</li>
                    <li class="list-group-item">垂直排列</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">输入框组</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">基本实例</li>
                    <li class="list-group-item">尺寸</li>
                    <li class="list-group-item">作为额外元素的按钮</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">导航</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">标签页</li>
                    <li class="list-group-item">胶囊式标签页</li>
                    <li class="list-group-item">两端对齐标签页</li>
                    <li class="list-group-item">禁用的链接</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">微章、巨幕、略缩图</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">微章</li>
                    <li class="list-group-item">巨幕</li>
                    <li class="list-group-item">略缩图</li>
                </ul>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="">警告框</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">基本实例</li>
                    <li class="list-group-item">可关闭的警告框</li>
                    <li class="list-group-item">警告框中的链接</li>
                </ul>
            </div>
            <div class="panel panel-primary last-panel">
                <div class="panel-heading">
                    <h4 class="">进度条</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">基本实例</li>
                    <li class="list-group-item">带有提示标签的进度条</li>
                    <li class="list-group-item">根据情境变化的效果</li>
                    <li class="list-group-item">条纹效果</li>
                    <li class="list-group-item">动画效果</li>
                    <li class="list-group-item">堆叠效果</li>
                </ul>
            </div>
            <div class="panel panel-primary last-panel">
                <div class="panel-heading">
                    <h4 class="">列表组</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">基本实例</li>
                    <li class="list-group-item">链接</li>
                    <li class="list-group-item">被禁用的条目</li>
                    <li class="list-group-item">情境类列表组</li>
                    <li class="list-group-item">定制内容</li>
                </ul>
            </div>
            <div class="panel panel-primary last-panel">
                <div class="panel-heading">
                    <h4 class="">面板</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item">基本实例</li>
                    <li class="list-group-item">带标题的面板</li>
                    <li class="list-group-item">带脚注的面板</li>
                    <li class="list-group-item">情境效果</li>
                    <li class="list-group-item">带表格的面板</li>
                    <li class="list-group-item">带列表的面板</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 中间主体 -->
    <div class="col-md-9 right clear" style="background-color:transparent;">
        <div class="contant clear">
            <!-- **************************Glyphicons 字体图标*************************** -->
            <!-- 可用的字体图标 -->
            <h2 style="margin-bottom: 10px;">所有可用的图标</h2>
            <p>
                包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许免费使用。为了表示感谢，希望你在使用时尽量为 <span class="v">Glyphicons</span> 添加一个友情链接。
            </p>
            <div class="bs-glyphicons clear">
                <ul class="bs-glyphicons-list clear" style="">
                    <li>
                        <span class="glyphicon glyphicon-asterisk"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-plus"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-plus</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-euro"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-euro</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-minus"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-minus</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-cloud"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-cloud</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-envelope"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-envelope</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-pencil"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-pencil</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-glass"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-glass</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-music"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-music</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-search"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-search</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-heart"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-heart</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-star</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-star-empty"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-user"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-user</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-film"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-film</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-th-large"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-th-large</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-th"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-th</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-th-list"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-th-list</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-ok"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-ok</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-remove"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-remove</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-zoom-in"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-zoom-out"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-off"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-off</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-signal"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-signal</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-cog"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-cog</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-trash"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-trash</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-home</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-file"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-file</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-time"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-time</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-road"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-road</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-download-alt"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-download"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-download</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-upload"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-upload</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-inbox"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-inbox</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-play-circle"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-repeat"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-repeat</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-refresh"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-refresh</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-list-alt"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-lock"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-lock</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-flag"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-flag</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-headphones"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-headphones</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-volume-off"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-volume-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-volume-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-qrcode"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-barcode"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-barcode</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-tag"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-tag</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-tags"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-tags</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-book"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-book</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-bookmark"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-print"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-print</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-camera"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-camera</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-font"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-font</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-bold"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-bold</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-ok"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-ok</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-italic"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-italic</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-align-left"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-align-left</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-align-center"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-align-center</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-align-right"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-align-right</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-align-justify"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-align-justify</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-list"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-list</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-facetime-video"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-facetime-video</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-picture"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-picture</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-map-marker"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-map-marker</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-tint"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-tint</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-edit"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-edit</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-share"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-share</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-check"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-check</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-move"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-move</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-step-backward"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-step-backward</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-fast-backward"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-fast-backward</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-backward"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-backward</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-play"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-play</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-pause"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-pause</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-stop"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-stop</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-forward"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-forward</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-fast-forward"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-fast-forward</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-step-forward"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-step-forward</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-eject"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-eject</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-chevron-left</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-chevron-right</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-plus-sign"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-plus-sign</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-minus-sign"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-minus-sign</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-remove-sign"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-remove-sign</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-ok-sign"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-ok-sign</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-question-sign"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-question-sign</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-info-sign"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-info-sign</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-remove-circle"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-remove-circle</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-ok-circle"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-ok-circle</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-ban-circle"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-ban-circle</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-arrow-left"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-arrow-left</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-arrow-right"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-arrow-right</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-arrow-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-arrow-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-arrow-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-arrow-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-share-alt"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-share-alt</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-resize-full"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-resize-full</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-resize-small"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-resize-small</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-exclamation-sign"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-eye-open"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-eye-open</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-eye-close"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-eye-close</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-plane"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-plane</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-calendar"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-calendar</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-random"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-random</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-comment"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-comment</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-chevron-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-chevron-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-chevron-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-folder-close"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-folder-close</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-folder-open"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-folder-open</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-resize-vertical"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-resize-horizontal"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-bullhorn"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-bullhorn</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-bell"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-bell</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-thumbs-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-thumbs-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-hand-right"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-hand-right</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-hand-left"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-hand-left</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-hand-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-hand-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-hand-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-hand-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-circle-arrow-right"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-circle-arrow-left"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-circle-arrow-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-circle-arrow-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-wrench"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-wrench</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-tasks"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-tasks</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-filter"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-filter</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-fullscreen"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-fullscreen</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-paperclip"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-paperclip</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-heart-empty"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-heart-empty</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-link"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-link</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-phone"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-phone</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-pushpin"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-pushpin</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-usd"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-usd</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-gbp"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-gbp</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sort"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sort</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sort-by-order"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sort-by-attributes"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-expand"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-expand</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-collapse-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-collapse-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-collapse-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-collapse-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-log-in"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-log-in</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-flash"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-flash</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-log-out"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-log-out</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-record"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-record</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-save"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-save</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-open"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-open</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-saved"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-saved</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-transfer"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-transfer</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-earphone"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-earphone</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-phone-alt"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-phone-alt</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-sd-video"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-sd-video</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-hd-video"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-hd-video</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-subtitles"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-subtitles</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-copyright-mark"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-registration-mark"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-registration-mark</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-alert"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-alert</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-scissors"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-scissors</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-yen"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-yen</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-option-horizontal"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-option-horizontal</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-option-vertical"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-option-vertical</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-menu-hamburger</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-text-size"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-text-size</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-text-color"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-text-color</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-text-background"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-text-background</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-triangle-right"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-triangle-right</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-triangle-left"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-triangle-left</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-triangle-bottom"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-triangle-bottom</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-triangle-top"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-triangle-top</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-superscript"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-superscript</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-subscript"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-subscript</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-menu-left"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-menu-left</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-menu-right"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-menu-right</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-menu-down"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-menu-down</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-menu-up"></span>
                        <span class="glyphicon-class">glyphicon glyphicon-menu-up</span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-option-horizontal" style="padding-top: 30px;"></span>
                    </li>


                </ul>
            </div>

            <!-- 如何使用 -->
            <h2 style="margin-bottom: 10px;">如何使用</h2>
            <p>
                出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
            </p>
            <div class="bs-callout bs-callout-danger">
                <h4>不要和其他组件混合使用</h4>
                <p>图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <code>&lt;span&gt;</code> 标签，并将图标类应用到这个 <code>&lt;span&gt;</code> 标签上。</p>
            </div>
            <div class="bs-callout bs-callout-danger">
                <h4>只对内容为空的元素起作用</h4>
                <p>图标类只能应用在不包含任何文本内容或子元素的元素上。</p>
            </div>
            <div class="bs-callout bs-callout-primary">
                <h4>改变图标字体文件的位置</h4>
                <p>
                    lindf.css 假定所有的图标字体文件全部位于 <code>../fonts/</code> 目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：
                <p>在 Less 源码文件中修改 <code>@icon-font-path</code> 和 <code>/</code> 或 <code>@icon-font-name 变量</code>。</p>
                <p>利用 Less 编译器提供的 相对 URL 地址选项。</p>
                <p>修改预编译 CSS 文件中的 url() 地址。</p>
                <p>根据你自身的情况选择一种方式即可。</p>
                </p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>图标的可访问性</h4>
                <p>
                <p>现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 <code>aria-hidden="true"</code> 属性。</p>
                <p>如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 <code>.sr-only</code> 类让其在视觉上表现出隐藏的效果。</p>
                <p>如果你所创建的组件不包含任何文本内容（例如， <code>&lt;button&gt;</code> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属性。</p>
                </p>
            </div>
            <div class="highlight">
                <pre><code><span class="v">&lt;span <span class="s">class=</span><span class="c">"glyphicon glyphicon-search"</span>&gt;<span>&lt;/span&gt;</span></span></code></pre>
            </div>

            <!-- 字体图标实例 -->
            <h2 style="margin-bottom: 10px;">字体图标实例</h2>
            <p>
                可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="btn-group" style="margin-bottom: 10px;">
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-fast-backward"></span>
                    </button>
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-backward"></span>
                    </button>
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-forward"></span>
                    </button>
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-fast-forward"></span>
                    </button>
                </div>
                <div>
                    <button class="btn btn-default btn-lg" type="button"  style="vertical-align: top">
                        <span class="glyphicon glyphicon-headphones"></span>
                        <span>Music</span>
                    </button>
                    <button class="btn btn-default" type="button"  style="vertical-align: top">
                        <span class="glyphicon glyphicon-headphones"></span>
                        <span>Music</span>
                    </button>
                    <button class="btn btn-default btn-sm" type="button"  style="vertical-align: top">
                        <span class="glyphicon glyphicon-headphones"></span>
                        <span>Music</span>
                    </button>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"glyphicon glyphicon-search"</span>&gt;<span>&lt;/span&gt;</span></span>
<span class="v">&lt;/button&gt;</span>

<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default btn-lg"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"glyphicon glyphicon-headphones"</span>&gt;<span>&lt;/span&gt;</span></span>
    <span class="v">&lt;span&gt;Music<span>&lt;/span&gt;</span></span>
<span class="v">&lt;/button&gt;</span></span></code></pre>
            </div>
            <!-- **************************************************************************** -->

            <!-- ******************************按钮组*************************************** -->
            <!-- 简述 -->
            <h2 style="margin-bottom: 10px;">按钮组</h2>
            <h3 style="margin-bottom: 10px;">简述</h3>
            <p>
                通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
            </p>
            <div class="bs-callout bs-callout-warning">
                <h4>按钮组中的工具提示和弹出框需要特别的设置</h4>
                <p>当为 <code>.btn-group</code> 中的元素应用工具提示或弹出框时，必须指定 container: 'body' 选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。</p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>确保设置正确的 <code>role</code> 属性并提供一个 label 标签</h4>
                <p>
                    为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，需要提供一个合适的 <code>role</code> 属性。对于按钮组合，应该是 <code>role="group"</code>，对于<code>toolbar</code>（工具栏）应该是 <code>role="toolbar"</code>。
                </p>
                <p>
                    一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单（比如实际情况，<code>&lt;button&gt;</code> 元素组成的两端对齐排列的按钮组 ）或下拉菜单。
                </p>
                <p>
                    此外，按钮组和工具栏应给定一个明确的 <code>label</code> 标签，尽管设置了正确的 <code>role</code> 属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，我们使用 <code>aria-label</code>，但是， <code>aria-labelledby</code> 也可以使用。
                </p>
            </div>

            <!-- 基本实例 -->
            <h2 style="margin-bottom: 10px;">基本实例</h2>
            <p>
                Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Left</button>
                    <button type="button" class="btn btn-default">Middle</button>
                    <button type="button" class="btn btn-default">Right</button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-success">Left</button>
                    <button type="button" class="btn btn-info">Middle</button>
                    <button type="button" class="btn btn-warning">Right</button>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group"</span>&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Left<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Center<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Right<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 按钮工具栏 -->
            <h2 style="margin-bottom: 10px;">按钮工具栏</h2>
            <p>
                把一组 <code>&lt;div class="btn-group"&gt;</code> 组合进一个 <code>&lt;div class="btn-toolbar"&gt;</code> 中就可以做成更复杂的组件。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="btn-toolbar" style="margin-bottom: 10px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">1</button>
                        <button type="button" class="btn btn-default">2</button>
                        <button type="button" class="btn btn-default">3</button>
                        <button type="button" class="btn btn-default">4</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">5</button>
                        <button type="button" class="btn btn-default">6</button>
                        <button type="button" class="btn btn-default">7</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">8</button>
                        <button type="button" class="btn btn-default">9</button>
                    </div>
                </div>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button type="button" class="btn btn-success">1</button>
                        <button type="button" class="btn btn-info">2</button>
                        <button type="button" class="btn btn-warning">3</button>
                        <button type="button" class="btn btn-danger">4</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success">5</button>
                        <button type="button" class="btn btn-info">6</button>
                        <button type="button" class="btn btn-warning">7</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success">8</button>
                        <button type="button" class="btn btn-info">9</button>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-toolbar"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>1<span class="v">&lt;/button&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>2<span class="v">&lt;/button&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>3<span class="v">&lt;/button&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>4<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>5<span class="v">&lt;/button&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>6<span class="v">&lt;/button&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>7<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>8<span class="v">&lt;/button&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>9<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 尺寸 -->
            <h2 style="margin-bottom: 10px;">尺寸</h2>
            <p>
                只要给 <code>.btn-group</code> 加上 <code>.btn-group-*</code> 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="btn-toolbar" style="margin-bottom: 10px;">
                    <div class="btn-group btn-group-lg">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Center</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                    <div class="btn-group btn-group-lg">
                        <button type="button" class="btn btn-success">Left</button>
                        <button type="button" class="btn btn-info">Center</button>
                        <button type="button" class="btn btn-warning">Right</button>
                    </div>
                </div>
                <div class="btn-toolbar" style="margin-bottom: 10px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Center</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success">Left</button>
                        <button type="button" class="btn btn-info">Center</button>
                        <button type="button" class="btn btn-warning">Right</button>
                    </div>
                </div>
                <div class="btn-toolbar" style="margin-bottom: 10px;">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Center</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-success">Left</button>
                        <button type="button" class="btn btn-info">Center</button>
                        <button type="button" class="btn btn-warning">Right</button>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group btn-group-lg"</span>&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Left<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Center<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Right<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group"</span>&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Left<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Center<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Right<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group btn-group-sm"</span>&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Left<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Center<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Right<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/div&gt;</span>
</span></code></pre>
            </div>

            <!-- 垂直排列 -->
            <h2 style="margin-bottom: 10px;">垂直排列</h2>
            <p>
                让一组按钮垂直堆叠排列显示而不是水平排列。<span class="c">分列式按钮下拉菜单不支持这种方式</span>。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="btn-group-vertical">
                    <button class="btn btn-default" type="button">btn-top</button>
                    <button class="btn btn-default" type="button">btn-center</button>
                    <button class="btn btn-default" type="button">btn-bottom</button>
                </div>
                <div class="btn-group-vertical">
                    <button class="btn btn-success" type="button">btn-top</button>
                    <button class="btn btn-info" type="button">btn-center</button>
                    <button class="btn btn-warning" type="button">btn-bottom</button>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group-vertical"</span>&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>btn-top<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>btn-center<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-default"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>btn-bottom<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"btn-group-vertical"</span>&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-success"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>btn-top<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-info"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>btn-center<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-warning"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>btn-bottom<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;/div&gt;</span>
</span></code></pre>
            </div>
            <!-- **************************************************************************** -->

            <!-- *********************************输入框组*********************************** -->
            <!-- 基本实例 -->
            <h2 style="margin-bottom: 10px;">输入框组</h2>
            <h3 style="margin-bottom: 10px;">基本实例</h3>
            <p>
                在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
                我们不支持在输入框的单独一侧添加多个额外元素（<code>.input-group-addon</code> 或 <code>.input-group-btn</code>）。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-group">
                    <div class="input-group" style="margin-bottom: 10px;">
                        <span class="input-group-addon">@</span>
                        <input class="form-control" type="text" placeholder="Email">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">.com</button>
                        </span>
                    </div>
                </form>
                <form class="form-group">
                    <label class="control-label">your http:</label>
                    <div class="input-group">
                        <span class="input-group-addon">https://</span>
                        <input class="form-control" type="text" placeholder="www.lindf.com">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">Go</button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"input-group"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-addon"</span>&gt;</span>@<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Email"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-btn"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>.com<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/span&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 尺寸 -->
            <h2 style="margin-bottom: 10px;">尺寸</h2>
            <p>
                为 <code>.input-group</code> 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-group">
                    <div class="input-group input-group-lg" style="margin-bottom: 10px;">
                        <span class="input-group-addon">@</span>
                        <input class="form-control" type="text" placeholder="Email">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">.com</button>
                        </span>
                    </div>
                </form>
                <form class="form-group">
                    <div class="input-group" style="margin-bottom: 10px;">
                        <span class="input-group-addon">@</span>
                        <input class="form-control" type="text" placeholder="Email">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">.com</button>
                        </span>
                    </div>
                </form>
                <form class="form-group">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">@</span>
                        <input class="form-control" type="text" placeholder="Email">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">.com</button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"input-group input-group-lg"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-addon"</span>&gt;</span>@<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Email"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-btn"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>.com<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/span&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"input-group"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-addon"</span>&gt;</span>@<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Email"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-btn"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>.com<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/span&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"input-group input-group-sm"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-addon"</span>&gt;</span>@<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Email"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-btn"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>.com<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/span&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 作为额外元素的按钮 -->
            <h2 style="margin-bottom: 10px;">作为额外元素的按钮</h2>
            <p>
                为输入框组添加按钮需要额外添加一层嵌套，不是 <code>.input-group-addon</code>，而是添加 <code>.input-group-btn</code> 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <form class="form-group">
                    <div class="input-group" style="margin-bottom: 10px;">
                        <input class="form-control" type="text" placeholder="Email">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">Search</button>
                        </span>
                    </div>
                </form>
                <form class="form-group">
                    <div class="input-group" style="margin-bottom: 10px;">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">Search</button>
                        </span>
                        <input class="form-control" type="text" placeholder="Email">
                    </div>
                </form>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"input-group"</span>&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Email"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-btn"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Search<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/span&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"input-group"</span>&gt;</span>
    <span class="v">&lt;span <span class="s">class=</span><span class="c">"input-group-btn"</span>&gt;</span>
        <span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span> <span class="s">type=</span><span class="c">"button"</span>&gt;</span>Search<span class="v">&lt;/button&gt;</span>
    <span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;input <span class="s">class=</span><span class="c">"form-control"</span> <span class="s">type=</span><span class="c">"text"</span> <span class="s">placeholder=</span><span class="c">"Email"</span>&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- **************************************************************************** -->

            <!-- ***********************************导航************************************ -->
            <!-- 导航 -->
            <h2 style="margin-bottom: 10px;">导航</h2>
            <p>
                框架中的导航组件都依赖同一个 <code>.nav</code> 类，状态类也是共用的。改变修饰类可以改变样式。
            </p>
            <div class="bs-callout bs-callout-primary">
                <h4>在标签页上使用导航需要依赖 JavaScript 标签页插件</h4>
                <p>
                    由于标签页需要控制内容区的展示，因此，你必须使用 标签页组件的 JavaScript 插件。另外还要添加 <code>role</code> 和 <code>ARIA</code> 属性 – 详细信息请参考该插件的 实例。
                </p>
            </div>
            <div class="bs-callout bs-callout-warning">
                <h4>确保导航组件的可访问性</h4>
                <p>
                    如果你在使用导航组件实现导航条功能，务必在 <code>&lt;ul&gt;</code> 的最外侧的逻辑父元素上添加 <code>role="navigation"</code> 属性，或者用一个 <code>&lt;nav&gt;</code> 元素包裹整个导航组件。不要将 <code>role</code> 属性添加到 <code>&lt;ul&gt;</code> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。
                </p>
            </div>

            <!-- 标签页 -->
            <h2 style="margin-bottom: 10px;">标签页</h2>
            <p>
                注意 <code>.nav-tabs</code> 类依赖 <code>.nav</code> 基类。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ul class="nav nav-tabs">
                    <li class="active"><a href="javascript:void(0);">Home</a></li>
                    <li ><a href="javascript:void(0);">Profile</a></li>
                    <li ><a href="javascript:void(0);">Messages</a></li>
                </ul>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;ul <span class="s">class=</span><span class="c">"nav nav-tabs"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"active"</span>&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Home<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Profile<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Messages<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
<span class="v">&lt;/ul&gt;</span></span></code></pre>
            </div>

            <!-- 胶囊式标签页 -->
            <h2 style="margin-bottom: 10px;">胶囊式标签页</h2>
            <p>
                HTML 标记相同，但使用 <code>.nav-pills</code> 类：
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ul class="nav nav-pills">
                    <li class="active"><a href="javascript:void(0);">Home</a></li>
                    <li ><a href="javascript:void(0);">Profile</a></li>
                    <li ><a href="javascript:void(0);">Messages</a></li>
                </ul>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;ul <span class="s">class=</span><span class="c">"nav nav-pills"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"active"</span>&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Home<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Profile<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Messages<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
<span class="v">&lt;/ul&gt;</span></span></code></pre>
            </div>

            <!-- 两端对齐的标签页 -->
            <h2 style="margin-bottom: 10px;">两端对齐的标签页</h2>
            <p>
                在 <code>大于 768px</code> 的屏幕上，通过 <code>.nav-justified</code> 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ul class="nav nav-tabs nav-justified" style="margin-bottom: 20px;">
                    <li class="active"><a href="javascript:void(0);">Home</a></li>
                    <li ><a href="javascript:void(0);">Profile</a></li>
                    <li ><a href="javascript:void(0);">Messages</a></li>
                </ul>
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="javascript:void(0);">Home</a></li>
                    <li ><a href="javascript:void(0);">Profile</a></li>
                    <li ><a href="javascript:void(0);">Messages</a></li>
                </ul>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;ul <span class="s">class=</span><span class="c">"nav nav-tabs nav-justified"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"active"</span>&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Home<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Profile<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Messages<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
<span class="v">&lt;/ul&gt;</span>
<span class="v">&lt;ul <span class="s">class=</span><span class="c">"nav nav-pills nav-justified"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"active"</span>&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Home<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Profile<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Messages<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
<span class="v">&lt;/ul&gt;</span></span></code></pre>
            </div>

            <!-- 禁用的链接 -->
            <h2 style="margin-bottom: 10px;">禁用的链接</h2>
            <p>
                对任何导航组件（标签页、胶囊式标签页），都可以添加 <code>.disabled</code> 类，从而实现链接为灰色且没有鼠标悬停效果。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ul class="nav nav-pills">
                    <li class="active"><a href="javascript:void(0);">Home</a></li>
                    <li><a href="javascript:void(0);">Profile</a></li>
                    <li class="disabled"><a href="javascript:void(0);">Messages</a></li>
                </ul>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;ul <span class="s">class=</span><span class="c">"nav nav-pills"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"active"</span>&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Home<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Profile<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
    <span class="v">&lt;li&gt;<span class="v">&lt;a <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Messages<span class="v">&lt;/a&gt;</span>&lt;/li&gt;</span>
<span class="v">&lt;/ul&gt;</span></span></code></pre>
            </div>
            <!-- **************************************************************************** -->

            <!-- *****************************微章、巨幕、略缩图****************************** -->
            <!-- 微章 -->
            <h2 style="margin-bottom: 10px;">微章</h2>
            <p>
                给链接、导航等元素嵌套 <code>&lt;span class="badge"&gt;</code>  元素，可以很醒目的展示新的或未读的信息条目。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <button class="btn btn-primary" type="button">
                    Messages <span class="badge">1</span>
                </button>
                <button class="btn btn-success" type="button">
                    Messages <span class="badge">2</span>
                </button>
                <button class="btn btn-warning" type="button">
                    Messages <span class="badge">3</span>
                </button>
                <button class="btn btn-danger" type="button">
                    Messages <span class="badge">4</span>
                </button>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-primary"</span>&gt;</span>
    Messages <span class="v">&lt;span <span class="s">class=</span><span class="c">"badge"</span>&gt;1&lt;/span&gt;</span>
<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-success"</span>&gt;</span>
    Messages <span class="v">&lt;span <span class="s">class=</span><span class="c">"badge"</span>&gt;2&lt;/span&gt;</span>
<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-warning"</span>&gt;</span>
    Messages <span class="v">&lt;span <span class="s">class=</span><span class="c">"badge"</span>&gt;3&lt;/span&gt;</span>
<span class="v">&lt;/button&gt;</span>
<span class="v">&lt;button <span class="s">class=</span><span class="c">"btn btn-danger"</span>&gt;</span>
    Messages <span class="v">&lt;span <span class="s">class=</span><span class="c">"badge"</span>&gt;4&lt;/span&gt;</span>
<span class="v">&lt;/button&gt;</span></span></code></pre>
            </div>

            <!-- 巨幕 -->
            <h2 style="margin-bottom: 10px;">巨幕</h2>
            <p>
                这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>
                        This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
                    </p>
                    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"jumbotron"</span>&gt;</span>
    <span class="v">&lt;h1&gt;Hello, world!&lt;/h1&gt;</span>
    <span class="v">&lt;p&gt;..........&lt;/p&gt;</span>
    <span class="v">&lt;p&gt;<span class="v">&lt;a <span class="s">class=</span><span class="c">"btn btn-primary btn-lg"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;Learn more&lt;/a&gt;</span>&lt;/p&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <p>
                如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 <code>.container</code> 元素的外面，并在组件内部添加一个 <code>.container</code> 元素。
            </p>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"jumbotron"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"container"</span>&gt;
        ......
    &lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 略缩图 -->
            <h2 style="margin-bottom: 10px;">略缩图</h2>
            <p>
                通过缩略图组件扩展框架的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-3" style="padding: 0 10px 10px;">
                        <a href="#" class="thumbnail">
                            <img src="img/lin1.svg" alt="100%x180" style="width: 100%;height: 180px;display: block;">
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3" style="padding: 0 10px 10px;">
                        <a href="#" class="thumbnail">
                            <img src="img/lin1.svg" alt="100%x180" style="width: 100%;height: 180px;display: block;">
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3" style="padding: 0 10px 10px;">
                        <a href="#" class="thumbnail">
                            <img src="img/lin1.svg" alt="100%x180" style="width: 100%;height: 180px;display: block;">
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3" style="padding: 0 10px 10px;">
                        <a href="#" class="thumbnail">
                            <img src="img/lin1.svg" alt="100%x180" style="width: 100%;height: 180px;display: block;">
                        </a>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"row"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"col-xs-6 col-sm-6 col-md-3"</span>&gt;
        <span class="v">&lt;a <span class="s">class=</span><span class="c">"thumbnail"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;
            <span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">alt=</span><span class="c">"..."</span>/&gt;</span>
        <span>&lt;/a&gt;</span></span>
    <span>&lt;/div&gt;</span></span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"col-xs-6 col-sm-6 col-md-3"</span>&gt;
        <span class="v">&lt;a <span class="s">class=</span><span class="c">"thumbnail"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;
            <span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">alt=</span><span class="c">"..."</span>/&gt;</span>
        <span>&lt;/a&gt;</span></span>
    <span>&lt;/div&gt;</span></span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"col-xs-6 col-sm-6 col-md-3"</span>&gt;
        <span class="v">&lt;a <span class="s">class=</span><span class="c">"thumbnail"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;
            <span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">alt=</span><span class="c">"..."</span>/&gt;</span>
        <span>&lt;/a&gt;</span></span>
    <span>&lt;/div&gt;</span></span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"col-xs-6 col-sm-6 col-md-3"</span>&gt;
        <span class="v">&lt;a <span class="s">class=</span><span class="c">"thumbnail"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;
            <span class="v">&lt;img <span class="s">src=</span><span class="c">"..."</span> <span class="s">alt=</span><span class="c">"..."</span>/&gt;</span>
        <span>&lt;/a&gt;</span></span>
    <span>&lt;/div&gt;</span></span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- **************************************************************************** -->

            <!-- ********************************警告框************************************* -->
            <!-- 基本实例 -->
            <h2 style="margin-bottom: 10px;">基本实例</h2>
            <p>
                将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，<code>.alert</code> 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。
            </p>
            <div class="bs-callout bs-callout-primary">
                <h4>没有默认类</h4>
                <p>
                    警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险
                </p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <div class="alert alert-success" role="alert">Well done! You successfully read this important alert message.</div>
                <div class="alert alert-info" role="alert">Heads up! This alert needs your attention, but it's not super important.</div>
                <div class="alert alert-warning" role="alert">Warning! Better check yourself, you're not looking too good.</div>
                <div class="alert alert-danger" role="alert">Oh snap! Change a few things up and try submitting again.</div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-success"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-info"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-warning"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-danger"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
</span></code></pre>
            </div>

            <!-- 可关闭的警告框 -->
            <h2 style="margin-bottom: 10px;">可关闭的警告框</h2>
            <p>
                为警告框添加一个可选的 <code>.alert-dismissible</code> 类和一个关闭按钮。
            </p>
            <div class="bs-callout bs-callout-primary">
                <h4>依赖警告框 JavaScript 插件</h4>
                <p>
                    如果需要为警告框组件提供关闭功能，请使用 jQuery 警告框插件。
                </p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <div class="alert alert-success alert-dismissible">
                    <div><strong>Success!</strong> Better check yourself, you're not looking too good.</div>
                    <span class="close close-slideUp">&times;</span>
                </div>
                <div class="alert alert-info alert-dismissible">
                    <div><strong>Info!</strong> Better check yourself, you're not looking too good.</div>
                    <span class="close close-hide">&times;</span>
                </div>
                <div class="alert alert-warning alert-dismissible">
                    <div><strong>Warning!</strong> Better check yourself, you're not looking too good.</div>
                    <span class="close close-fadeOut">&times;</span>
                </div>
                <div class="alert alert-danger alert-dismissible" style="margin-bottom: 0;">
                    <div><strong>Danger!</strong> Better check yourself, you're not looking too good.</div>
                    <span class="close">&times;</span>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-success alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-info alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-warning alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-danger alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
</span></code></pre>
            </div>

            <!-- 警告框中的链接 -->
            <h2 style="margin-bottom: 10px;">警告框中的链接</h2>
            <p>
                用 <code>.alert-link</code> 工具类，可以为链接设置与当前警告框相符的颜色。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="alert alert-success">
                    Well done! You successfully read
                    <a href="javascript:void(0);" class="alert-link"><strong>this important alert message</strong></a>
                </div>
                <div class="alert alert-info">
                    Well done! You successfully read
                    <a href="javascript:void(0);" class="alert-link"><strong>this important alert message</strong></a>
                </div>
                <div class="alert alert-warning">
                    Well done! You successfully read
                    <a href="javascript:void(0);" class="alert-link"><strong>this important alert message</strong></a>
                </div>
                <div class="alert alert-danger" style="margin-bottom: 0;">
                    Well done! You successfully read
                    <a href="javascript:void(0);" class="alert-link"><strong>this important alert message</strong></a>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-success alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-info alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-warning alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"alert alert-danger alert-dismissible"</span>&gt;</span>......<span class="v">&lt;/div&gt;</span>
</span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- *************************进度条***************************** -->
            <!-- 基本实例 -->
            <h2 style="margin-bottom: 10px;">基本实例</h2>
            <p>
                默认样式的进度条
            </p>
            <div class="bs-callout bs-callout-primary">
                <h4>依赖警告框 JavaScript 插件</h4>
                <p>
                    如果需要为警告框组件提供关闭功能，请使用 jQuery 警告框插件。
                </p>
            </div>
            <div class="bs-example">
                <span>实例：</span>
                <div class="progress">
                    <div class="progress-bar" style="width: 40%;"></div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar"</span> <span class="s">style=</span><span class="c">"width: 60%;"</span>&gt;</span><span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 带有提示标签的进度条 -->
            <h2 style="margin-bottom: 10px;">带有提示标签的进度条</h2>
            <p>
                将设置了 <code>.sr-only</code> 类的 <code>&lt;span&gt;</code> 标签从进度条组件中移除 类，从而让当前进度显示出来。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="progress">
                    <div class="progress-bar" style="width: 50%;">
                        <span>50%</span>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar"</span> <span class="s">style=</span><span class="c">"width: 60%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>60%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 根据情境变化效果 -->
            <h2 style="margin-bottom: 10px;">根据情境变化效果</h2>
            <p>
                进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar" style="width: 30%;">
                        <span>30%</span>
                    </div>
                </div>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-success" style="width: 40%;">
                        <span>40%</span>
                    </div>
                </div>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-info" style="width: 50%;">
                        <span>50%</span>
                    </div>
                </div>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-warning" style="width: 60%;">
                        <span>60%</span>
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-danger" style="width: 70%;">
                        <span>70%</span>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar"</span> <span class="s">style=</span><span class="c">"width: 30%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>30%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-success"</span> <span class="s">style=</span><span class="c">"width: 40%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>40%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-info"</span> <span class="s">style=</span><span class="c">"width: 50%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>50%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-warning"</span> <span class="s">style=</span><span class="c">"width: 60%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>60%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-danger"</span> <span class="s">style=</span><span class="c">"width: 70%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>70%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 条纹效果 -->
            <h2 style="margin-bottom: 10px;">条纹效果</h2>
            <p>
                通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-striped" style="width: 30%;">
                        <span>30%</span>
                    </div>
                </div>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%;">
                        <span>40%</span>
                    </div>
                </div>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 50%;">
                        <span>50%</span>
                    </div>
                </div>
                <div class="progress" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 60%;">
                        <span>60%</span>
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 70%;">
                        <span>70%</span>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 30%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>30%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-success progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 40%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>40%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-info progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 50%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>50%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-warning progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 60%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>60%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-danger progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 70%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>70%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 动画效果 -->
            <h2 style="margin-bottom: 10px;">动画效果</h2>
            <p>
                为 <code>.progress-bar-striped</code> 添加 <code>.active</code> 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="progress active" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-striped" style="width: 30%;">
                        <span>30%</span>
                    </div>
                </div>
                <div class="progress active" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%;">
                        <span>40%</span>
                    </div>
                </div>
                <div class="progress active" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 50%;">
                        <span>50%</span>
                    </div>
                </div>
                <div class="progress active" style="margin-bottom: 10px;">
                    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 60%;">
                        <span>60%</span>
                    </div>
                </div>
                <div class="progress active">
                    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 70%;">
                        <span>70%</span>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"progress active"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 30%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>30%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress active"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-success progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 40%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>40%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress active"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-info progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 50%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>50%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress active"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-warning progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 60%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>60%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"progress active"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-danger progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 70%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>70%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 堆叠效果 -->
            <h2 style="margin-bottom: 10px;">堆叠效果</h2>
            <p>
                把多个进度条放入同一个 <code>.progress</code> 中，使它们呈现堆叠的效果。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 10%;">
                        <span>10%</span>
                    </div>
                    <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%;">
                        <span>20%</span>
                    </div>
                    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 30%;">
                        <span>30%</span>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"progress"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-success progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 10%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>10%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-info progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 20%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>20%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"progress-bar progress-bar-danger progress-bar-striped"</span> <span class="s">style=</span><span class="c">"width: 30%;"</span>&gt;</span>
        <span class="v">&lt;span&gt;</span>30%<span class="v">&lt;/span&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- ************************列表组***************************** -->
            <!-- 基本实例 -->
            <h2 style="margin-bottom: 10px;">基本实例</h2>
            <p>
                最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ul class="list-group" style="width: 60%;margin-bottom: 0;">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;ul <span class="s">class=</span><span class="c">"list-group"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;</span>Cras justo odio<span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;</span>Dapibus ac facilisis in<span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;</span>Morbi leo risus<span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;</span>Porta ac consectetur ac<span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item"</span>&gt;</span>Vestibulum at eros<span class="v">&lt;/li&gt;</span>
<span class="v">&lt;/ul&gt;</span></span></code></pre>
            </div>

            <!-- 链接 -->
            <h2 style="margin-bottom: 10px;">链接</h2>
            <p>
                用 <code>&lt;a&gt;</code> 标签代替 <code>&lt;li&gt;</code> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <code>&lt;ul&gt;</code> 标签替换为 <code>&lt;div&gt;</code> 标签）。没必要给列表组中的每个元素都加一个父元素。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="list-group" style="width: 60%;margin-bottom: 0;">
                    <a class="list-group-item active" href="javascript:void(0);">Cras justo odio</a>
                    <a class="list-group-item" href="javascript:void(0);">Dapibus ac facilisis in</a>
                    <a class="list-group-item" href="javascript:void(0);">Morbi leo risus</a>
                    <a class="list-group-item" href="javascript:void(0);">Porta ac consectetur ac</a>
                    <a class="list-group-item" href="javascript:void(0);">Vestibulum at eros</a>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"list-group"</span>&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item active"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Cras justo odio<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Dapibus ac facilisis in<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Morbi leo risus<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Porta ac consectetur ac<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Vestibulum at eros<span class="v">&lt;/a&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 被禁用的条目 -->
            <h2 style="margin-bottom: 10px;">被禁用的条目</h2>
            <p>
                为 <code>.list-group-item</code> 添加 <code>.disabled</code> 类可以让单个条目显示为灰色，表现出被禁用的效果。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="list-group" style="width: 60%;margin-bottom: 0;">
                    <a class="list-group-item" href="javascript:void(0);">Cras justo odio</a>
                    <a class="list-group-item disabled" href="javascript:void(0);">Dapibus ac facilisis in</a>
                    <a class="list-group-item" href="javascript:void(0);">Morbi leo risus</a>
                    <a class="list-group-item disabled" href="javascript:void(0);">Porta ac consectetur ac</a>
                    <a class="list-group-item" href="javascript:void(0);">Vestibulum at eros</a>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"list-group"</span>&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Cras justo odio<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item disabled"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Dapibus ac facilisis in<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Morbi leo risus<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item disabled"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Porta ac consectetur ac<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Vestibulum at eros<span class="v">&lt;/a&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 情境类列表组 -->
            <h2 style="margin-bottom: 10px;">情境类列表组</h2>
            <p>
                为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 <code>.active</code> 状态。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
                    <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
                    <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
                    <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
                </ul>
                <div class="list-group" style="margin-bottom: 0;">
                    <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
                    <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
                    <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"list-group"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-success"</span>&gt;</span>Dapibus ac facilisis in<span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-info"</span>&gt;</span>Cras sit amet nibh libero<span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-warning"</span>&gt;</span>Porta ac consectetur ac<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-danger"</span>&gt;</span>Vestibulum at eros<span class="v">&lt;/li&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"list-group"</span>&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item list-group-item-success"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Dapibus ac facilisis in<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item list-group-item-info"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Cras sit amet nibh libero<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item list-group-item-warning"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Porta ac consectetur ac<span class="v">&lt;/a&gt;</span>
    <span class="v">&lt;a <span class="s">class=</span><span class="c">"list-group-item list-group-item-danger"</span> <span class="s">href=</span><span class="c">"javascript:void(0);"</span>&gt;</span>Vestibulum at eros<span class="v">&lt;/a&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 定制内容 -->
            <h2 style="margin-bottom: 10px;">定制内容</h2>
            <p>
                列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <ul class="list-group" style="width: 60%;margin-bottom: 0;">
                    <!--<li class="list-group-item list-group-item-warning"><a class=" active" href="#">111</a></li>-->
                    <li class="list-group-item active" href="javascript:;">
                        <h4 class="list-group-item-heading">
                            List group item heading
                            <small>--subHeading</small>
                        </h4>
                        <p class="list-group-item-text">
                            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                        </p>
                    </li>
                    <li class="list-group-item list-group-item-success" href="javascript:;">
                        <h4 class="list-group-item-heading">
                            List group item heading
                            <small>--subHeading</small>
                        </h4>
                        <p class="list-group-item-text">
                            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                        </p>
                    </li>
                    <li class="list-group-item list-group-item-info">
                        <h4 class="list-group-item-heading">
                            List group item heading
                            <small>--subHeading</small>
                        </h4>
                        <p class="list-group-item-text">
                            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                        </p>
                    </li>
                    <li class="list-group-item list-group-item-danger">
                        <h4 class="list-group-item-heading">
                            List group item heading
                            <small>--subHeading</small>
                        </h4>
                        <p class="list-group-item-text">
                            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                        </p>
                    </li>
                </ul>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;ul <span class="s">class=</span><span class="c">"list-group"</span>&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item active"</span>&gt;</span>
        <span class="v">&lt;h4 <span class="s">class=</span><span class="c">"list-group-item-heading"</span>&gt;</span>
            List group item heading
            <span class="v">&lt;small&gt;</span>--subHeading<span class="v">&lt;/small&gt;</span>
        <span class="v">&lt;/h4&gt;</span>
        <span class="v">&lt;p <span class="s">class=</span><span class="c">"list-group-item-text"</span>&gt;</span>
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
        <span class="v">&lt;/p&gt;</span>
    <span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-success"</span>&gt;</span>
        <span class="v">&lt;h4 <span class="s">class=</span><span class="c">"list-group-item-heading"</span>&gt;</span>
            List group item heading
            <span class="v">&lt;small&gt;</span>--subHeading<span class="v">&lt;/small&gt;</span>
        <span class="v">&lt;/h4&gt;</span>
        <span class="v">&lt;p <span class="s">class=</span><span class="c">"list-group-item-text"</span>&gt;</span>
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
        <span class="v">&lt;/p&gt;</span>
    <span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-info"</span>&gt;</span>
        <span class="v">&lt;h4 <span class="s">class=</span><span class="c">"list-group-item-heading"</span>&gt;</span>
            List group item heading
            <span class="v">&lt;small&gt;</span>--subHeading<span class="v">&lt;/small&gt;</span>
        <span class="v">&lt;/h4&gt;</span>
        <span class="v">&lt;p <span class="s">class=</span><span class="c">"list-group-item-text"</span>&gt;</span>
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
        <span class="v">&lt;/p&gt;</span>
    <span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-danger"</span>&gt;</span>
        <span class="v">&lt;h4 <span class="s">class=</span><span class="c">"list-group-item-heading"</span>&gt;</span>
            List group item heading
            <span class="v">&lt;small&gt;</span>--subHeading<span class="v">&lt;/small&gt;</span>
        <span class="v">&lt;/h4&gt;</span>
        <span class="v">&lt;p <span class="s">class=</span><span class="c">"list-group-item-text"</span>&gt;</span>
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
        <span class="v">&lt;/p&gt;</span>
    <span class="v">&lt;/li&gt;</span>
<span class="v">&lt;/ul&gt;</span></span></code></pre>
            </div>
            <!-- *********************************************************** -->

            <!-- **************************面板***************************** -->
            <!-- 基本实例 -->
            <h2 style="margin-bottom: 10px;">基本实例</h2>
            <p>
                默认的 <code>.panel</code> 组件所做的只是设置基本的边框<code>（border）</code>和内补<code>（padding）</code>来包含内容。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="panel panel-default" style="margin-bottom: 0;">
                    <div class="panel-body">
                        Basic panel example
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-default"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>
        Basic panel example
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 带标题的面版 -->
            <h2 style="margin-bottom: 10px;">带标题的面版</h2>
            <p>
                通过 <code>.panel-heading</code> 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 <code>.panel-title</code> 类的 <code>&lt;h1&gt;-&lt;h6&gt;</code> 标签，添加一个预定义样式的标题。不过，<code>&lt;h1&gt;-&lt;h6&gt;</code> 标签的字体大小将被 .panel-heading 的样式所覆盖。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="panel panel-default">
                    <div class="panel-heading">Panel heading without title</div>
                    <div class="panel-body">
                        Panel content
                    </div>
                </div>
                <div class="panel panel-default" style="margin-bottom: 0;">
                    <div class="panel-heading">
                        Panel title
                    </div>
                    <div class="panel-body">
                        Panel content
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-default"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>
        Panel heading without title
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>
        Panel content
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-default"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>
        Panel title
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>
        Panel content
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 带脚注的面版 -->
            <h2 style="margin-bottom: 10px;">带脚注的面版</h2>
            <p>
                把按钮或次要的文本放入 <code>.panel-footer</code> 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="panel panel-default" style="margin-bottom: 0;">
                    <div class="panel-body">
                        Panel content
                    </div>
                    <div class="panel-footer">Panel footer</div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-default"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>
        Panel content
    <span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-footer"</span>&gt;</span>
        Panel footer
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 情境效果 -->
            <h2 style="margin-bottom: 10px;">情境效果</h2>
            <p>
                像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="panel panel-primary">
                    <div class="panel-heading">Panel title</div>
                    <div class="panel-body">Panel content</div>
                </div>
                <div class="panel panel-success">
                    <div class="panel-heading">Panel title</div>
                    <div class="panel-body">Panel content</div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">Panel title</div>
                    <div class="panel-body">Panel content</div>
                </div>
                <div class="panel panel-warning">
                    <div class="panel-heading">Panel title</div>
                    <div class="panel-body">Panel content</div>
                </div>
                <div class="panel panel-danger" style="margin-bottom: 0;">
                    <div class="panel-heading">Panel title</div>
                    <div class="panel-body">Panel content</div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-primary"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>Panel title<span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>Panel footer<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-success"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>Panel title<span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>Panel footer<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-info"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>Panel title<span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>Panel footer<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-warning"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>Panel title<span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>Panel footer<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-danger"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>Panel title<span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-body"</span>&gt;</span>Panel footer<span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 带表格的面版 -->
            <h2 style="margin-bottom: 10px;">带表格的面版</h2>
            <p>
                为面板中不需要边框的表格添加 <code>.table</code> 类，是整个面板看上去更像是一个整体设计。如果是带有 <code>.panel-body</code> 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="panel panel-primary" style="margin-bottom: 0;">
                    <div class="panel-heading">Panel title</div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <tr>
                                <th>ID</th>
                                <th>NAME</th>
                                <th>SEX</th>
                                <th>DATE</th>
                            </tr>
                            <tr>
                                <th>1</th>
                                <th>lin</th>
                                <th>true</th>
                                <th>1994</th>
                            </tr>
                            <tr>
                                <th>2</th>
                                <th>huang</th>
                                <th>true</th>
                                <th>1995</th>
                            </tr>
                            <tr>
                                <th>3</th>
                                <th>chen</th>
                                <th>false</th>
                                <th>1996</th>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-primary"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>Panel title<span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"table-responsive"</span>&gt;</span>
        <span class="v">&lt;table <span class="s">class=</span><span class="c">"table table-bordered"</span>&gt;</span>
            ......
        <span class="v">&lt;/table&gt;</span>
    <span class="v">&lt;/div&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- 带列表组的面版 -->
            <h2 style="margin-bottom: 10px;">带列表组的面版</h2>
            <p>
                可以简单地在任何面版中加入具有最大宽度的列表组。
            </p>
            <div class="bs-example">
                <span>实例：</span>
                <div class="panel panel-primary" style="overflow: hidden;margin-bottom: 0;">
                    <div class="panel-heading">Panel heading</div>
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-success">Cras justo odio</li>
                        <li class="list-group-item list-group-item-info">Dapibus ac facilisis in</li>
                        <li class="list-group-item list-group-item-warning">Morbi leo risus</li>
                        <li class="list-group-item list-group-item-danger">Porta ac consectetur ac</li>
                    </ul>
                </div>
            </div>
            <div class="highlight">
                <pre><code><span><span class="v">&lt;div <span class="s">class=</span><span class="c">"panel panel-primary"</span>&gt;</span>
    <span class="v">&lt;div <span class="s">class=</span><span class="c">"panel-heading"</span>&gt;</span>panel-heading<span class="v">&lt;/div&gt;</span>
    <span class="v">&lt;ul <span class="s">class=</span><span class="c">"list-group"</span>&gt;</span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-success"</span>&gt;</span>Cras justo odio<span class="v">&lt;/li&gt;</span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-info"</span>&gt;</span>Dapibus ac facilisis in<span class="v">&lt;/li&gt;</span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-warning"</span>&gt;</span>Morbi leo risus<span class="v">&lt;/li&gt;</span>
        <span class="v">&lt;li <span class="s">class=</span><span class="c">"list-group-item list-group-item-danger"</span>&gt;</span>Porta ac consectetur ac<span class="v">&lt;/li&gt;</span>
    <span class="v">&lt;/ul&gt;</span>
<span class="v">&lt;/div&gt;</span></span></code></pre>
            </div>

            <!-- *********************************************************** -->
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="bs-docs-footer">
    <div class="container">
        <ul class="bs-docs-footer-links">
            <li><a href="javascript:void(0);">GitHub 仓库</a></li>
            <li><a href="javascript:void(0);">捐助我们</a></li>
            <li><a href="javascript:void(0);">友情链接</a></li>
            <li><a href="javascript:void(0);">关于</a></li>
        </ul>
        <p>
            Designed and built with all the love in the world by <a href="javascript:void(0);">@mdo</a> and <a href="javascript:void(0);">@fat</a>. Maintained by the <a href="javascript:void(0);">core team</a> with the help of our contributors.
        </p>
        <p>
            本项目源码受 <a href="javascript:void(0);">MIT</a>开源协议保护，文档受 <a href="javascript:void(0);">CC BY 3.0</a> 开源协议保护。
        </p>
    </div>
</div>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/lindf.js"></script>
<script src="js/Assembly.js"></script>
</body>
</html>